<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-25 22:19:50
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-04 16:23:56
 * @FilePath: /nhw/src/views/Work/EquipmentRepair/index2.vue
-->
<template>
  <div class="EquipmentRepair">
    <NavBar
      fixed
      placeholder
      title="设备报修"
      z-index="999"
      @click-right="onClickRight"
      ref="nav"
    >
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div class="main">
      <!-- <Cell title="材料数量" :value="num" /> -->
      <Field
        v-model="num"
        label="材料数量"
        placeholder="请输入材料数量"
        input-align="right"
        type="number"
      ></Field>

      <Cell title="其他要求" />
      <textarea
        v-model="textarea1"
        placeholder="请简述"
        cols="30"
        rows="10"
      ></textarea>

      <Cell title="维修方式" />
      <textarea
        v-model="textarea2"
        placeholder="请简述"
        cols="30"
        rows="10"
      ></textarea>

      <Field
        v-model="money.name"
        label="维修金额预估"
        input-align="right"
        required
        placeholder="请选择维修金额预估"
        @click="show1 = true"
        is-link
      ></Field>

      <Field
        v-model="field1"
        label="推荐供应商"
        input-align="right"
        placeholder="请输入推荐供应商"
      ></Field>
      <Field
        v-model="field2"
        label="资质要求"
        input-align="right"
        placeholder="请输入资质要求"
      ></Field>
      <Field
        v-model="field3"
        label="分管负责人"
        input-align="right"
        placeholder="请输入分管负责人"
      ></Field>
      <Field
        v-model="field4"
        label="维修工时"
        input-align="right"
        placeholder="请输入维修工时"
      ></Field>
      <Field
        v-model="field5"
        label="采购主管"
        input-align="right"
        placeholder="请输入采购主管"
      ></Field>
    </div>
    <div class="btn-placeholder"></div>
    <div class="btnFa">
      <Button class="btn" @click="onSearch">提交</Button>
    </div>

    <!-- 弹框 -->
    <Popup v-model="show1" position="bottom" :style="{ height: '50%' }">
      <Picker
        title="紧急程度"
        show-toolbar
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="show1 = false"
        :value-key="'name'"
      ></Picker>
    </Popup>
  </div>
</template>

<script>
import {
  EquipmentRepairServiceSearch,
  EquipmentRepairServicePost,
} from "../../../api/work";
// import BaiduMap from "BaiduMap";
import Layout from "components/Layout";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  Picker,
  Popup,
  Toast,
} from "vant";
export default {
  name: "EquipmentRepair",

  components: { Toast, Uploader, NavBar, Icon, Field, Cell, Picker, Popup },

  directives: {},

  data() {
    return {
      orgNo: "",
      num: "",
      textarea1: "",
      textarea2: "",
      money: "",
      field1: "",
      field2: "",
      field3: "",
      field4: "",
      field5: "",
      show1: false,
      columns1: [
        // { name: "1000以上", id: 1 },
        // { name: "1000一下", id: 0 },
      ],
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
  },
  mounted() {
    this.getMuneList1();
  },

  methods: {
    //扫一扫事件
    scan() {
      console.log(1);
      this.$router.push({
        path: "Equipmentselection",
        query: {},
      });
    },
    // 金额预估
    async getMuneList1() {
      console.log(111);
      const { param } = await EquipmentRepairServicePost({
        code: "EquipRepairsManage-amount",
      });
      console.log("menu", param.data);
      this.columns1 = param.data;
    },
    onClickLeft() {},
    onClickRight() {},
    toRecordsList() {
      this.$router.push({
        path: "RecordsList",
        query: {},
      });
    },
    onConfirm1(value, index) {
      console.log(value, index);
      this.money = value;
      this.show1 = false;
    },
    async onSearch() {
      // console.log(this.money == "");
      // return console.log(this.money.name);
      if (this.money == "" || this.money.name.trim().length <= 0)
        return Toast.fail("请选择维修金额预估");
      try {
        let query = {
          ...this.$route.query,
          materialNum: this.num,
          other: this.textarea1,
          maintenance: this.textarea2,
          amount: this.money.id,
          supplier: this.field1,
          qualification: this.field2,
          person: this.field3,
          hours: this.field4,
          purchasing: this.field5,
          orgNo: this.orgNo,
        };
        // return console.log(query);
        await EquipmentRepairServiceSearch(query);

        this.$router.push({
          name: "RecordsList",
        });
      } catch (err) {
        Toast.fail("提交失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.EquipmentRepair {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 20px;
    background-color: #fff;
    .search-icon {
      color: @primary;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin: 20px;
    }
    /deep/.van-uploader__upload {
      border: 2px dashed #e16712;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background: #fff;
      .van-icon {
        color: rgb(225, 103, 18);
        &::before {
          content: "\F0A2";
        }
      }
    }
  }
  .btn-placeholder {
    height: 98px;
  }
  .btnFa {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding-bottom: 10px;
  }
  .btn {
    height: 98px;
    width: 90%;
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  /deep/.van-icon {
    display: flex;
    align-items: center;
  }
}
</style>